import React, { Component } from 'react';
import './表单.css'
const data = [
    {
        label: "线上活动",
        name: "线上活动",
        checked: true,
    },
    {
        label: "推广类",
        name: "推广类",
        checked: false,
    },
    {
        label: "线下活动",
        name: "线下活动",
        checked: false,
    },
    {
        label: "品牌介绍",
        name: "品牌介绍",
        checked: false
    }
]
class Table_l extends Component {
    // 属性
    state = {
        title: "前端技术前端发展讨论会",
        tel:"",
        desc: "",//描述
        sex: "",//赞助商
        city: "北京",//地区
        enddata:"",//结束日期
        data:"",//开始日期
    }
    //输入框活动名称
    Chandata=(e)=>{
        this.setState({
            title:e.target.value
        })
    }
    //复选框城市
    Chancity=(e)=>{
        this.setState({
            city:e.target.value
        })
    }
    //日期输入框(开始)
    Chandata=(e)=>{
        this.setState({
            data:e.target.value
        })
    }
     //日期输入框(Jieshu)
     Chanenddata=(e)=>{
        this.setState({
            enddata:e.target.value
         })
    }
    // 活动类型
    Chanclass=(e,index)=>{
        if (e.target.type === 'checkbox') {
            data[index].checked = !data[index].checked
        }
        let name = e.target.name
        let value = e.target.value
        this.setState({
            [name]: value
        })
        console.log(data);
    }
    // 活动赞助商
    Chanac=(e)=>{
        this.setState({
            sex:e.target.value
        })
    }
    // 描述
    Chandesc=(e)=>{
        this.setState({
            desc:e.target.value
        })
    }
    //提交
    sub=(e)=>{
        e.preventDefault()
        const {title,tel, city,sex,desc}=this.state
        console.log(this.state)
    }
    // 页面
    render() {
        return (
            <div className="max">
                <form >
                    {/* 活动名称 */}
                    <div className="activity_name float">
                        <div className='right'>
                            <span>*</span>
                            活动名称
                        </div>
                        <div>
                            <input className="acticity_name_input" type="text" value={this.state.acticity_name} />
                        </div>
                    </div>
                    {/* 城市 */}
                    <div className="city float">
                        <div className="right">
                            <span>*</span>
                            城市
                        </div>
                        <div className="city_name_input">
                            <select className='select_box' value={this.state.city} onChange={this.Chancity} >
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="广州">广州</option>
                            </select>
                        </div>
                    </div>
                    {/* 日期 */}
                    <div className='date float'>
                        <div className="right">
                            <span>*</span>
                            日期
                        </div>
                        <div className="data">
                            <input type="text" className='data_input' onChange={this.Chandata} value={this.state.data} /> —— <input type="text"  onChange={this.Chanenddata} className='data_input' value={this.state.enddata} />
                        </div>
                    </div>
                    {/* 允许电话 */}
                    <div className='tel float'>
                        <div className="right">
                            <span>*</span>
                            允许电话
                        </div>
                        <div>

                        </div>
                    </div>
                    {/* 活动类型 */}
                    <div className='activity_class float'>
                        <div className="right">
                            <span>*</span>
                            活动类型
                        </div>
                        <div>
                            {
                                data.map((item, key) => {
                                    return (
                                        <label key={key}>
                                            <input type="checkbox" checked={item.checked} name={item.name} onChange={(e) => this.Chanclass(e, key)} />{item.label}
                                        </label>
                                    )
                                })
                            }
                        </div>
                    </div>
                    {/* 活动赞助商 */}
                    <div className="acticity_s float">
                        <div className="right">
                            <span>*</span>
                            活动赞助商
                        </div>
                        <div>
                            <label htmlFor=""><input type="radio" value="1" checked={this.state.sex==="1"}  onChange={this.Chanac} />淘宝</label>
                            <label htmlFor=""><input type="radio" value="2" checked={this.state.sex==="2"} onChange={this.Chanac} />京东</label>
                        </div>
                    </div>
                    {/* 描述 */}
                    <div className="describe float">
                        <div className="right">
                            <span>*</span>
                            描述
                        </div>
                        <div>
                            <textarea value={this.state.desc}  cols="70" rows="7" onChange={this.Chandesc}></textarea>
                        </div>
                    </div>
                    {/* 按钮区域 */}
                    <div className="button">
                        <button className="submit" onClick={this.sub}>提交</button>
                        <button className="reset">重置</button>
                    </div>
                </form>
            </div>
        )
    }
}
export default Table_l